<template>
  <div>
    <div class="app-container">
      <el-form size="mini" ref="postForm" :model="postForm" :label-position="'right'" label-width="80px">
        <el-row type="flex" justify="space-between" :gutter="20">

          <el-col :span="5">
            <el-form-item label="用户ID:">
              <el-input v-model="postForm.userName" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="姓名:">
              <el-input v-model="postForm.nickName" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号:">
              <el-input v-model="postForm.phone" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" size="mini" @click="query()">查询</el-button>
              <el-button type="warning" size="mini" @click="addInfo">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20">
        <el-col :span="8" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
          <el-tree
            node-key="id"
            :data="treeData"
            :props="treeProps"
            :expand-on-click-node="false"
            default-expand-all
            @node-click="treeCheck"
          />
        </el-col>
        <el-col :span="16">
          <el-table :height="tableHeight" width="100%" :data="tableData" border>
            <el-table-column type="index" align="center" width="50"></el-table-column>
            <el-table-column
              prop="userName"
              label="用户Id"
            />
            <el-table-column
              prop="nickName"
              label="姓名"
            />
            <el-table-column
              prop="phone"
              label="手机号"
            />
            <el-table-column
              prop="deptName"
              label="部门"
            />
            <el-table-column
              fixed="right"
              label="操作"
              width="300"
              align="center"
            >
              <template slot-scope="scope">
                <el-button type="success" size="mini" @click="editInfo(scope.$index,scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="delInfo(scope.$index,scope.row)">删除</el-button>
                <el-button type="success" size="mini" @click="resetting(scope.$index,scope.row)">重置密码</el-button>
                <el-button type="warning" size="mini" @click="deptSort(scope.row,0)">上移</el-button>
                <el-button type="warning" size="mini" @click="deptSort(scope.row,1)">下移</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row type="flex" class="row-bg" justify="center">
        <el-pagination
          background
          layout="total,prev,pager,next,jumper,sizes"
          :total="total"
          @size-change="handleSizeChange"
          :current-page.sync="currentPage"
          :page-sizes="[15, 30, 45, 60, 75,90,105,120,135,150]"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
    <el-dialog :title="title" :visible.sync="centerDialogVisible" center>
      <el-form ref="info" :rules="rules" :model="info" label-position="right" label-width="100px">
        <el-form-item label="用户ID:" prop="userName">
          <el-input v-model="info.userName" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input v-model="info.phone" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input placeholder="初始密码为123456" disabled/>
        </el-form-item>
        <el-form-item label="姓名:" prop="nickName">
          <el-input v-model="info.nickName" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="身份证号:" prop="idCard">
          <el-input v-model="info.idCard" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="电子邮箱:" prop="dzyx">
          <el-input v-model="info.dzyx" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="角色:" prop="roleKey">
          <el-select v-model="info.roleKey" multiple filterable placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所在部门:" prop="deptId">
          <treeselect
            v-model="info.deptId"
            :multiple="false"
            :normalizer="normalizer"
            :options="treeData"
            value-consists-of="ALL"
            :flatten-search-results="true"
            placeholder="请选择部门"
          />
        </el-form-item>
        <el-form-item label="签名文件:" prop="signature">
          <imgUpdate v-model="info.signature" :file-key="info.id+'userJson'" :max-limit="1"/>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrEdit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  page,
  getInfo,
  delInfo,
  addOrEdit,
  resetting,
  userSort,
  readExcel,
  allPostList
} from '@/api/system/sysUser.js'
import {getTreeList} from '@/api/system/dept.js'
import {getAllList} from '@/api/system/role.js'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import imgUpdate from '@/components/Upload/imgUpdate'

export default {
  components: {Treeselect, imgUpdate},
  data() {
    return {
      tableHeight: window.innerHeight - 180,
      fileUpUrl: process.env.BASE_API + '/file/upload',
      readExcelDialog: false,
      readExcelFile: null,
      // 总条数
      total: 0,
      // 每页显示个数
      pageSize: 15,
      // 页码
      currentPage: 1,
      postForm: {},
      // 树结构
      treeData: [],
      pDeptName: null,
      // 角色
      roleList: [],
      postList: [],
      // 树结构配置
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      treeProps: {
        children: 'children',
        label: 'name'
      },
      info: {},
      tableData: [],
      listSelect: {},
      options: [],
      editIndex: 0,
      centerDialogVisible: false,
      title: '新增用户',
      rules: {
        userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        nickName: [{required: true, message: '请输入昵称', trigger: 'blur'}],
        phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
        roleKey: [{required: true, message: '请选择角色', trigger: 'blur'}],
        postId: [{required: true, message: '请选择职位', trigger: 'blur'}]
      }
    }
  },
  created() {
    this.getData()
    this.getTreeList()
    this.roleAllList()
    // this.getpostList()

  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
    },
    // 导入用户
    readExcel() {
      this.readExcelDialog = true
      this.readExcelFile = []
    },
    getpostList() {
      allPostList().then(response => {
        this.postList = response.data
      })
    },
    knowledgeSuccess(res, file, fileList) {
      readExcel(res.data.address).then(response => {
        this.getData()
        this.getTreeList()
        this.$notify({
          title: '成功',
          message: '导入 成功',
          type: 'success',
          duration: 2000
        })
        this.readExcelFile = []
        this.readExcelDialog = false
      })
    },
    handleExceed(files, fileList) {
      this.$message.warning(`只能上传一个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 排序
    deptSort(row, sort) {
      userSort(this.listSelect.deptId, row.id, sort).then(response => {
        this.getData()
      })
    },
    // 表单树点击
    treeInfoCheck(node) {
      this.info.deptId = node.id
      this.pDeptName = node.name
    },
    // 获取全部角色
    roleAllList() {
      getAllList().then(response => {
        this.roleList = response.data
      })
    },
    // 获取部门树结构
    getTreeList() {
      getTreeList().then(response => {
        this.treeData = response.data
      })
    },
    // 树结构选择
    treeCheck(node) {
      this.postForm.deptId = node.id
      this.query()
    },
    // 分页查询
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
    // 新增
    addInfo() {
      this.title = '新增用户'
      this.info = {}
      this.centerDialogVisible = true
    },
    /**
     * 编辑
     * @param row
     */
    editInfo(index, row) {
      this.editIndex = index
      this.title = '编辑'
      this.centerDialogVisible = true
      getInfo(row.id).then(response => {
        this.info = response.data
        if (this.info.supervisorDeptIdJson != null) {
          this.info.supervisorDeptIdJson = JSON.parse(this.info.supervisorDeptIdJson)
        }
        this.info.roleKey = JSON.parse(this.info.roleKey)
      })
    },
    /**
     * 重置密码
     * @param index
     * @param row
     */
    resetting(index, row) {
      resetting(row.id).then(response => {
        this.$notify({
          title: '成功',
          message: '密码重置成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    delInfo(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delInfo(row.id).then(response => {
          this.tableData.splice(index, 1)
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    // 查询条件
    query() {
      this.listSelect.userName = this.postForm.userName
      this.listSelect.deptId = this.postForm.deptId
      this.listSelect.nickName = this.postForm.nickName
      this.listSelect.phone = this.postForm.phone
      this.currentPage = 1
      this.getData()
    },
    getData() {
      // 请求分页参数
      page(this.pageSize, this.currentPage, this.listSelect.userName, this.listSelect.nickName, this.listSelect.phone, this.listSelect.deptId).then(response => {
        this.total = parseInt(response.count)
        this.tableData = response.data
      })
    },
    addOrEdit() {
      this.$refs['info'].validate((valid) => {
        if (valid) {
          console.log("_____", this.info)
          addOrEdit(this.info.id, this.info.userName, this.info.nickName, JSON.stringify(this.info.roleKey), this.info.phone, this.info.headUrl, this.info.deptId, this.info.postId, this.info.practiceNum,
            this.info.supervisor, JSON.stringify(this.info.supervisorDeptIdJson), this.info.director, this.info.resignationTime, this.info.groupLeader, this.info.idCard, this.info.dzyx, this.info.workcode, this.info.oaUserId,
            this.info.positiveTime, this.info.practiceTime, this.info.signature
          ).then(response => {
            this.centerDialogVisible = false
            if (this.info.id == null) {
              // 新增
              this.getData()
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            } else {
              // 编辑
              this.tableData.splice(this.editIndex, 1, response.data)
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            }
          })
        }
      })
    }
  }
}
</script>

